<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">测试ajax封装</button>
  <script>
    /* 
    封装一个GET类型AJAX请求函数
    XHR + promise
    内部使用xhr发异步ajax请求, 返回一个promise对象
    */
    function ajax(url) {
      return new Promise((resolve, reject) => {
        // 1. 创建xhr
        const xhr = new XMLHttpRequest()
        // 2. 初始化
        xhr.open('GET', url)
        // 3. 绑定监听
        xhr.onreadystatechange = () => {
          console.log('onreadystatechange()')

          if (xhr.readyState!=4) return

          // 请求返回后修改promise的状态
          // 如果成功了, 将promise更新成功的状态, 并指定value 
          if (xhr.status>=200 && xhr.status<300) {
            // 成功的value指定为响应体json数据对应的js对象/数组
            resolve(JSON.parse(xhr.responseText))
          } else { // 如果失败了, 将promise更新失败的状态, 并指定reason
            // 失败的reason指定为包含状态码的提示文本的error对象
            reject(new Error(`请求失败 status=${xhr.status}`))
          }
        }
        // 4. 发送请求
        xhr.send()
      })
    }


    document.getElementById('btn').onclick = async () => {
      // const p = ajax('http://localhost:3000/movie2?q=飞')
      // p.then(
      //   result => console.log('请求成功的数据', result),
      //   error => alert(error.message)
      // )
      try {
        const result = await ajax('http://localhost:3000/movie2?q=飞')
        console.log('请求成功的数据2', result)
      } catch (error) {
        alert(error.message)
      }
    }

    async function request() {
      const result = await ajax('http://localhost:3000/movie2?q=飞')
      return result
    }

    async function test() {

      const result = await {m: 1}
      console.log('result', result)

      // 调用async函数返回的的结果为一个新的promise对象
      // async函数返回的promise由什么决定? 函数执行的结果决定 (与then的特点一致)
      const promise = request()
      console.log(promise)
    }
    test()
   
  </script>
</body>
</html>